<html>
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages:['annotatedtimeline']});
	google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
   	<% for one in @six_digits %>
	<%
		# six_digit(key) => "calls"       => {time,calls}
    	#           	 => "src_carrier" => src_carrier
		#           	 => "max"         => calls (maximum)
    	# I named it as per_six_digt but it is not actually per six digit
		
	%>
		<% if  one != nil %>
		<% six_digit = one[0]; value = one[1] %>
      	
      		var data = new google.visualization.DataTable();
       		data.addRows(<%= value["calls"].count %>);
       		data.addColumn('datetime'	, 'timestamp');
       		data.addColumn('number'		, 'Calls');
			<% i = 0 %>
			<% for item in value["calls"] %> //# six_digit(key) => "calls" => {time,calls}
				data.setValue(<%= i %>, 0, new Date(<%= item[0] * 1000 %>));
       			data.setValue(<%= i %>, 1, <%= item[1] %>);
				<% i+=1 %>
			<% end %>
			
			var options = {};
			options['width'] = '900px';
			options['height'] = '400px';
			options['title'] = '<%= "%s carrier:%s max: %s" % [six_digit, value["src_carrier"], value["max"]] %>';
			options['legend']= 'none';
			options['pointSize']=1;
       
       		var scatterchart = new google.visualization.ScatterChart(document.getElementById('chart_<%= six_digit %>'));
			scatterchart.draw(data, options);
      	<% end %>
    <% end %>

      }
	  
	  
	  google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'six_digit');
        data.addColumn('string', 'carrier');
		data.addColumn('number', 'Max in 5min');
		data.addColumn('number', 'Total Records');
		//data.addColumn('string', 'chart');
        data.addRows(<%= @six_digits.size %>);
		<% i=0 %>
        <%for one in @six_digits %>
		<% six_digit = one[0]; value = one[1] %>
			data.setCell(<%=i%>, 0, '<%= six_digit %>');
        	data.setCell(<%=i%>, 1, '<%= value["src_carrier"] %>');			
			data.setCell(<%=i%>, 2, <%= value["max"] %>);
			data.setCell(<%=i%>, 3, <%= value["total"] %>);
			//data.setCell(<%=i%>, 3,'<div id="chart_" style="height: 300px;"></div>');			
			<% i += 1%>
        <%end%>
        var options = {};
		options["width"] = "800px";
		options["showNumber"] = true;
		options["allowHtml"] = true; 

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, options);
      }
    </script>
  </head>
  <body>
  <%= request.request_uri %><br />
  <INPUT TYPE="BUTTON" VALUE="Go Back" ONCLICK="history.go(-1)">
  <div id="table_div" align="center">
  	google table
  </div>
  <br /> 
  <table style="width: 100%;">
  	<% for one in @six_digits %>
  		<% six_digit = one[0]; value = one[1] %>
  		<tr>
  			<td>
  				<div id="chart_<%= six_digit %>" style="width: 80%; height: 300px;"></div>
  			</td>
  		</tr>
  	<% end %>
  </table>
  
  
  </body>
  </html>
	
	
